<template>
  <div class="service">
    <van-nav-bar title="考虫机器人客服" fixed left-arrow @click-left="onClickLeft" />
    <div class="main">
      <div class="box">
        <div id="content" class="content">
          <div v-for="(item, index) in info" :key="index">
            <!-- 左侧:考虫机器人提示问题及问题答案显示版块 -->
            <div class="info_r info_default" v-if="item.type == 'leftinfo'">
              <div class="con_r con_text">
                <div>{{ item.content }}</div>
                <div v-for="(ques, index) in item.question" :key="index">
                  <div
                    class="con_que"
                    @click="clickRobot(ques.content, ques.id)"
                  >
                    <div class="czkj-question-msg">
                      {{ ques.index }}
                      {{ ques.content }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="time_r">{{ item.time }}</div>
            </div>
            <!-- 右侧:客户发出消息的显示版块 -->
            <div class="info_l" v-if="item.type == 'rightinfo'">
              <div class="con_r con_text">
                <span class="con_l">{{ item.content }}</span>
              </div>
              <div class="time_l">{{ item.time }}</div>
            </div>
          </div>
        </div>
        <!-- 底部查询/提问栏 -->
        <div class="setproblem">
          <textarea
            placeholder="请输入您的问题..."
            id="text"
            v-model="customerText"
            @keyup.enter="sentMsg()"
          ></textarea>
          <button @click="sentMsg()" class="setproblems">
            <span>发 送</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      customerText: "",
      info: [
        {
          type: "leftinfo",
          time: this.getTodayTime(),
          name: "robot",
          content: `      您好，我是机器人小助手，请问有什么可以帮助到您。  
      亲爱的虫子，由于疫情影响，部分物流订单会发何时能滞留或丢件等情况，遇到此类情况还请您及时联系考虫人工客服进行解决，切勿私下与快递员进行赔偿解决，目前与您私下解决的均为诈骗。
      温馨提示：
      1.切勿把您的个人信息和银行卡信息告知陌生人。
      2.切勿填写或扫描陌生人的链接或二维码。
      3.不要被大金额近千诱惑先行转账。`,
          question: [],
        },
      ],
      timer: null,
      robotQuestion: [
        { id: 1, content: "如何查询课程资料的快递信息", index: 1 },
        { id: 2, content: "课程有效期说明", index: 2 },
        { id: 3, content: "课程资料在哪里下载?", index: 3 },
        {
          id: 4,
          content: "四六级课程购买错误(仅12小时内)可自助app退款",
          index: 4,
        },
        { id: 5, content: "系统班课程配套资料发货说明", index: 5 },
      ],
      robotAnswer: [
        {
          id: 1,
          content: `  登录考虫账号---我的订单---找到相对应的订单---查看快递--查看物流,资料寄出后会显示快递单号，物流会在快递寄出第二天更新~`,
          index: 1,
        },
        { id: 2, content: "有效期问题 :-)", index: 2 },
        {
          id: 3,
          content: `  1.__手机/平板：考虫APP-我的课程-需要下载资料的课程-资料和服务-资料下载
    2.__电脑网页：我的课程-需要下载资料的课-资料下载`,
          index: 3,
        },
        {
          id: 4,
          content: `亲爱的虫子，
  在购买系统班课程12小时内，您可以在APP内选择退款（退款通道会在购买课程12小时后关闭）。
  具体流程：登录考虫APP————个人中心————我的订单————选择您的订单————点击自主退款。
  注意：自主退款预计到账时间2-7个工作日。`,
          index: 4,
        },
        { id: 5, content: `亲爱的虫子，你好。
  课程配套资料一般是72小时内发货，部分课程发货时间会有其他特殊说明（可以在详情页查看）。
  课程详情中说明，只提供电子资料的课程，是没有纸质资料的哦。`, index: 5 },
      ],
    };
  },
  created() {
    //刷新页面时回到顶部
    window.scrollTo(0,0);
    this.showTimer();
  },
  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.push("/weipersonal");
    },
    // 用户发送消息
    sentMsg() {
      clearTimeout(this.timer);
      this.showTimer();
      let text = this.customerText.trim();
      if (text != "") {
        let obj = {
          type: "rightinfo",
          time: this.getTodayTime(),
          content: text,
        };
        this.info.push(obj);
        this.appendRobotMsg(this.customerText);
        this.customerText = "";
        this.$nextTick(() => {
          let contentHeight = document.getElementById("content");
          console.log(contentHeight);
          if(contentHeight !==null){
            contentHeight.scrollTop = contentHeight.scrollHeight;
          }
        });
      }
    },
    // 机器人回答消息
    appendRobotMsg(text) {
      console.log(text);
      clearTimeout(this.timer);
      this.showTimer();
      text = text.trim();
      let answerText = "";
      let flag;
      for (let i = 0; i < this.robotAnswer.length; i++) {
        //判断用户输入的内容是否为数字。则返回相对应id的答案
        if (this.robotAnswer[i].id == text) {
          let ques = this.robotQuestion[text - 1].content;
          console.log(ques);
          flag = true;
          answerText =
            `您是否想问的是这个问题：${ques}` +
            `  
      答案是：` +
            this.robotAnswer[i].content;
          break;
        }
        if (this.robotAnswer[i].content.indexOf(text) != -1) {
          flag = true;
          answerText =
            `你想要的是否是这个答案呢？：` + this.robotAnswer[i].content;
          break;
        }
      }
      if (flag) {
        let obj = {
          type: "leftinfo",
          time: this.getTodayTime(),
          name: "robot",
          content: answerText,
          question: [],
        };
        this.info.push(obj);
      } else {
        answerText =
          "对不起，亲爱的小虫子，我不太明白你要问的问题  不知你是否是想问下面的问题呢?";
        let obj = {
          type: "leftinfo",
          time: this.getTodayTime(),
          name: "robot",
          content: answerText,
          question: this.robotQuestion,
        };
        this.info.push(obj);
      }
      this.$nextTick(() => {
        let contentHeight = document.getElementById("content");
        console.log(contentHeight);
        if(contentHeight != null){
            contentHeight.scrollTop = contentHeight.scrollHeight;
          }
      });
    },
    sentMsgById(val, id) {
      clearTimeout(this.timer);
      this.showTimer();

      let robotById = this.robotAnswer.filter((item) => {
        return item.id == id;
      });
      let obj_l = {
        type: "leftinfo",
        time: this.getTodayTime(),
        name: "robot",
        content: robotById[0].content,
        question: [],
      };
      let obj_r = {
        type: "rightinfo",
        time: this.getTodayTime(),
        name: "robot",
        content: val,
        question: [],
      };
      this.info.push(obj_r);
      this.info.push(obj_l);
      this.$nextTick(() => {
        let contentHeight = document.getElementById("content");
        console.log(contentHeight);
        if(contentHeight != null){
            contentHeight.scrollTop = contentHeight.scrollHeight;
          }
      });
    },
    // 点击机器人的单个问题
    clickRobot(val, id) {
      this.sentMsgById(val, id);
    },
    // 结束语
    endMsg() {
      let happyEnding = {
        type: "leftinfo",
        time: this.getTodayTime(),
        content: "由于长时间没有操作，该对话已关闭",
        question: [],
      };
      this.info.push(happyEnding);
      this.$nextTick(() => {
        let contentHeight = document.getElementById("content");
        console.log(contentHeight);
        if(contentHeight != null){
            contentHeight.scrollTop = contentHeight.scrollHeight;
          }
      });
    },
  
    showTimer() {
      this.timer = setTimeout(this.endMsg, 1000 * 60);
    },
    getTodayTime() {
      // 获取当前时间
      let day = new Date();
      let seconds = day.getSeconds();
      if (seconds < 10) {
        seconds = "0" + seconds;
      } else {
        seconds = seconds;
      }
      let minutes = day.getMinutes();
      if (minutes < 10) {
        minutes = "0" + minutes;
      } else {
        minutes = minutes;
      }
      let time =
        day.getFullYear() +
        "-" +
        (day.getMonth() + 1) +
        "-" +
        day.getDate() +
        " " +
        day.getHours() +
        ":" +
        minutes +
        ":" +
        seconds;
      return time;
    },
  },
};
</script>
<style lang="scss">
.service {
  text-align: left;
  .van-nav-bar {
    background-color: #ffcb00;
    .van-nav-bar__title {
      font-weight: 600;
    }
    .van-icon {
      color: #000;
    }
  }
  .main {
    margin-top: 46px;
    text-align: left;
    width: 100%;
    height: 100vh;
    background: #fafafa;
    overflow: hidden;
    .box {
      width: 100%;
      height: 93%;
      background-color: #fafafa;
      position: relative;
      // padding: 1.25rem;
      #content {
        height: 100%;
        overflow-y: scroll;
        font-size: 14px;
        width: 100%;
        .circle {
          display: inline-block;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background-color: #eff1f3;
        }
        .con_text {
          color: #333;
          margin-bottom: 5px;
          white-space: pre-wrap;
        }
        .con_que {
          color: #1c88ff;
          height: 30px;
          line-height: 30px;
          cursor: pointer;
        }
        .info_r {
          position: relative;
          .circle_r {
            position: absolute;
            left: 0%;
          }
          .pic_r {
            width: 17px;
            height: 17px;
            margin: 8px;
          }
          .con_r {
            display: inline-block;
            /* max-width: 253px; */
            width: 55%;
            min-height: 55px;
            /* min-height: 20px; */
            background-color: #f2f5f7;
            border-radius: 6px;
            padding: 10px;
            // margin-left: 40px;
          }
          .time_r {
            margin-left: 45px;
            color: #999;
            font-size: 12px;
          }
        }
        .info_l {
          text-align: right;
          // margin-right: 20px;
          color: #ffffff;
          color: #3163c5;
          margin-top: 10px;

          // .circle_l {
          //   // vertical-align: -10px;
          // }
          .pic_l {
            width: 13px;
            height: 17px;
            margin: 8px 10px;
          }
          .time_l {
            margin-right: 45px;
            color: #999999;
            font-size: 12px;
            margin-top: 5px;
          }
          .con_l {
            display: inline-block;
            width: 220px;
            min-height: 50px;
            background-color: #ffcb00;
            border-radius: 6px;
            padding: 10px;
            text-align: left;
            color: #fff;
            margin-right: 5px;
          }
        }
        #question {
          cursor: pointer;
        }
      }
    }
  }
  .setproblem {
    width: 100%;
    height: 46px;
    background-color: #fafafa;
    position: fixed;
    bottom: 0;
    margin-top: 3.75rem;
  }
  .setproblem textarea {
    height: 42px;
    width: 75%;
    resize: none;
    outline: none;
    border-color: #ccc;
    border-radius: 5px;
    color: #999999;
    padding: 5px;
    box-sizing: border-box;
    margin-left: 5%;
  }
  .setproblem button {
    width: 3.875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background: #ffcb00;
    opacity: 1;
    border-radius: 4px;
    font-size: 10px;
    color: #ffffff;
    position: absolute;
    right: 3%;
    top: 3%;
    cursor: pointer;
    border: none;
  }

  .czkj-item-title {
    line-height: 25px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  .czkj-item-question {
    cursor: pointer;
    display: block;
    padding: 8px;
    position: relative;
    border-bottom: 1px dashed #ccc;
    line-height: 20px;
    min-height: 20px;
    overflow: hidden;
  }

  .czkj-question-msg {
    float: left;
    font-size: 14px;
    color: #3163c5;
  }
}
</style>